Estoy aprendiendo algo de React con un proyecto que soñé que tiene datos que se pasan a través de accesorios y también mensajes pubsub. Estoy pasando una dirección de correo electrónico a través de pubsub y funciona bien en el método de suscripción de pubsub, así:
myEmailChannel.subscribe("email", (msg) => { let data = msg.data; console.log(data); });Lo anterior da como resultado un registro de consola de
value: 'test@test.com'test@test.com es un correo electrónico de prueba falso que envié a través de pubsub. El problema ocurre cuando trato de agregar los datos a una matriz de estado ya inicializada de "correos electrónicos", aparece un error loco sobre " Los objetos no son válidos como un niño React (encontrado: objeto con claves {valor}). Si te referías a para renderizar una colección de niños, use una matriz en su lugar ". Estoy intentando algo como:
myEmailChannel.subscribe("email", (msg) => { let data = msg.data; console.log(data); let emails = [...this.state.emails]; emails.push({ value: data }); this.setState({emails}); });solo para obtener el error antes mencionado. En realidad, sucede sin importar cómo intente agregar los datos a la matriz. Creo que entiendo que solo estoy formateando incorrectamente los datos entrantes para la matriz de estado. Cualquier ayuda sería muy apreciada.
EDITAR: Seguí el error un poco más y dice que el error ocurre cuando intenta iterar sobre la matriz para mostrar:
{this.state.emails.map((email, index) => { return ( <li key={index}>{email}</li> ); })}Como mencionaste, el email es un objeto. Cuando haces algo como esto
this.state.emails.map((email, index) => ( <li key={index}>{email}</li> )) React se confunde. No sabe si debe tratar el objeto de email como una cadena (que es exactamente lo que está tratando de hacer) o representarlo como un componente.
Puedes hacer algo como esto en su lugar.
this.state.emails.map((email, index) => ( <li key={index}>{email.value}</li> ))